import React from 'react'
import { Modal, Table } from 'antd'
import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons'
import style from './Modal.module.less'

const columns = [
  { title: '序号', dataIndex: 'index', key: 'index', align: 'center', width: '80px' },
  { title: '序列号', dataIndex: 'serialNumber', key: 'serialNumber' },
  { title: '签名日期', dataIndex: 'signDateStr', key: 'signDateStr', width: 100 },
  { title: '证书颁发者', dataIndex: 'issuerStr', key: 'issuerStr' },
  { title: '生效日期', dataIndex: 'beforeDateStr', key: 'beforeDateStr', width: 100 },
  { title: '失效日期', dataIndex: 'afterDateStr', key: 'afterDateStr', width: 100 },
  {
    title: '验证情况',
    dataIndex: 'verifyResult',
    key: 'verifyResult',
    width: 100,
    align: 'center',
    render: (v) => {
      if (v === 'true') {
        return <CheckCircleFilled className={style.true} />
      }
      return <CloseCircleFilled className={style.false} />
    }
  },
  { title: '位置', dataIndex: 'location', key: 'location' },
  { title: '签名原因', dataIndex: 'reason', key: 'reason' }
]

function Main ({ visible = false, data = [], hide = () => {} }) {
  return (
    <Modal title='签名列表' width={1280} open={visible} footer={null} onCancel={() => hide()}>
      <Table rowKey='index' dataSource={data} columns={columns} pagination={null} />
    </Modal>
  )
}

export default Main
